<template>
  <div>
    <input type="number" v-model="phoneNum" class="inp_phone" placeholder="请输入手机号码" />
    <div class="choice_money">
      <p>充值金额</p>
      <div class="money">
        <!-- <div
          :class="isUse!=index? 'white' : 'orange'"
          @click="isUse=index"
          v-for="(item,index) in list"
          :key="index"
        >{{list[index].price}}</div>-->
        <div class="orange">{{list[0].price}}</div>
        <!-- <div :class="ischange? 'white' : 'orange'" @click="fifty">50元</div>
        <div :class="ischange? 'white' : 'orange'" @c           lick="hundred">100元</div>-->
      </div>
    </div>
    <div class="now" @click="toRecharge">立即充值</div>
  </div>
</template>
<script>
import { SwitchCell, Dialog, Toast } from 'vant';
// import wx from 'weixin-js-sdk';
export default {
  data() {
    return {
      checked: true,
      isUse: 0,
      list: [{ price: '30' }],
      phoneNum: '',
      id: '',
      coin: '',
      isUseCoin: '',
      datas: {},
      haveBind: ''
    };
  },
  mounted() {},
  methods: {
    // 立刻充值确认
    toRecharge() {
      if (!/^1[3456789]\d{9}$/.test(this.phoneNum)) {
        Toast('请输入正确的手机号码');
      } else {
        Dialog.confirm({
          message: `确定给号码${this.phoneNum}充值吗?`
        })
          .then(() => {
            this.$router.push({
              name: 'managerpaynow',
              params: {
                idCardNo: this.$route.params.idCardNo,
                username: this.$route.params.username,
                phone: this.phoneNum
              }
            });
          })
          .catch(() => {});
      }
    }
  },
  components: { 'van-switch-cell': SwitchCell }
};
</script>
<style lang="scss" scoped>
.inp_phone {
  width: 750px;
  height: 170px;
  background-color: #ffffff;
  border: 0;
  font-size: 60px;
  padding-left: 30px;
}
.choice_money {
  margin-top: 30px;
  width: 750px;
  height: 211px;
  background-color: #ffffff;
  p {
    font-size: 35px;
    color: #000000;
    padding-left: 32px;
  }
  .money {
    display: flex;
    justify-content: flex-start;
    margin-left: 20px;
    margin-top: 26px;
    .orange {
      font-size: 39px;
      color: #fefefe;
      width: 213px;
      height: 98px;
      background-color: #59b7f5;
      border-radius: 8px;
      text-align: center;
      line-height: 98px;
    }
    .white {
      font-size: 39px;
      color: #fa6044;
      width: 213px;
      height: 98px;
      background-color: #ffffff;
      border-radius: 8px;
      text-align: center;
      line-height: 98px;
      border: solid 1px #fa6044;
    }
  }
}
.use_integral {
  margin-top: 31px;
  width: 750px;
  height: 88px;
  background-color: #ffffff;
  box-shadow: 0px 2px 0px 0px rgba(234, 234, 234, 0.35);
}
.hint {
  display: flex;
  width: 100%;
  height: 53px;
  font-size: 24px;
  color: #fd0309;
  justify-content: center;
  margin-top: 17px;
}
.now {
  width: 690px;
  height: 88px;
  background-color: #59b7f5;
  box-shadow: 0px -2px 0px 0px #e0dfdd;
  border-radius: 8px;
  margin: 100px auto;
  font-size: 32px;
  color: #fafafb;
  text-align: center;
  line-height: 88px;
}
</style>